import React, { Component } from 'react'
export class Test extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'zjd',
      message: 'hellow',
    }
  }
  changeName() {
    this.setState({
      name: 'qq',
    })
  }
  changeMessage() {
    this.setState({
      message: '你好',
    })
  }
  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.message !== nextState.message) {
      return true
    } else {
      return false
    }
  }
  render() {
    console.log('Test 的render函数被调用')
    return (
      <>
        <div>{this.state.name}</div>
        <button onClick={() => this.changeName()}>改变名字</button>
        <button onClick={() => this.changeMessage()}>改变消息</button>
        <hr />
        <Son></Son>
      </>
    )
  }
}
function Son(props) {
  console.log('Son 的render函数被调用')
  return (
    <>
      <div>Son</div>
      <SonSon></SonSon>
    </>
  )
}

class SonSon extends Component {
  render() {
    console.log('SonSon 的render函数被调用')
    return (
      <>
        <div>SonSon</div>
      </>
    )
  }
}
